<!-- @formatter:off -->
<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '家校沟通AI助手',
    backgroundColor: '#ffffff',
  },
}
</route>
<!-- @formatter:on -->

<script lang="ts" setup>
import { LOGIN_PAGE, SysTab } from '@/models/sys'
import Recommend from '@/pages/recommend/index.vue'
import Summary from '@/pages/summary/index.vue'
import Tool from '@/pages/tool/index.vue'
import NavBar from './components/nav-bar/index.vue'
import { useUserStore } from '@/store/user'

const { getAppId } = useUserStore()
onShareAppMessage(() => {
  return {
    title: import.meta.env.VITE_APP_TITLE,
    path: `${LOGIN_PAGE}?app_id=${getAppId()}`,
  }
})

// #ifdef MP-WEIXIN
uni.hideHomeButton()
// #endif

const recommendRef = ref<InstanceType<typeof Recommend>>()
const summaryRef = ref<InstanceType<typeof Summary>>()
const toolRef = ref<InstanceType<typeof Tool>>()

const tabState = reactive({
  active: SysTab.Recommend,
  list: [
    { title: 'AI推荐回复', value: SysTab.Recommend },
    { title: '沟通总结', value: SysTab.Summary },
    { title: '实用工具', value: SysTab.Tool },
  ],
  change: () => {
    tabRefresh()
  },
})

const isSummaryOpen = ref(false)
function tabRefresh() {
  // if (tabState.active === SysTab.Tool) toolRef.value.refresh()
}

const scrollStyle = computed(() => {
  const statusBarHeight = uni.getSystemInfoSync().statusBarHeight

  return {
    height: `calc(100vh - 45px)`,
    overflow: 'hidden',
  }
})
</script>

<template>
  <view class="body-content">
    <NavBar
      title="家校沟通AI助手"
      :list="tabState.list"
      v-model="tabState.active"
      @change="
        tabState.active === SysTab.Summary && !isSummaryOpen && (isSummaryOpen = !isSummaryOpen)
      "
    ></NavBar>
    <view class="relative" :style="scrollStyle">
      <view v-show="tabState.active === SysTab.Recommend" class="views">
        <Recommend :isTab="tabState.active === SysTab.Recommend" ref="recommendRef"></Recommend>
      </view>
      <view v-show="tabState.active === SysTab.Summary" class="views">
        <Summary
          :isTab="tabState.active === SysTab.Summary"
          ref="summaryRef"
          v-if="isSummaryOpen"
        ></Summary>
      </view>
      <view v-show="tabState.active === SysTab.Tool" class="views">
        <Tool ref="toolRef"></Tool>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background: #fdfdfd;
}
</style>
<style lang="scss" scoped>
.body-content {
  overflow: hidden;
  background: #fdfdfd;
}

.views {
  height: 100%;
}
.main-title-color {
  color: #d14328;
}
</style>
